<template>
  <div class="login-container">
    <h2>密码登录</h2>
    <div class="login-form">
      <div class="input-group">
        <el-input
          v-model="form.username"
          placeholder="请输入账号"
          prefix-icon="el-icon-user">
        </el-input>
      </div>
      <div class="input-group">
        <el-input
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          show-password>
        </el-input>
      </div>

      <!-- 添加同意条款复选框 -->
      <div class="agreement">
        <el-checkbox v-model="agreement">
          我已阅读并同意
          <a href="#" @click.prevent="showTerms('用户协议')">《用户协议》</a>、
          <a href="#" @click.prevent="showTerms('隐私政策')">《隐私政策》</a>
          等。
        </el-checkbox>
      </div>

      <el-button type="primary" class="login-button" @click="login">登录</el-button>
      <div class="options">
        <a href="#" @click.prevent="goToRegister">注册账号</a>
        <a href="#" @click.prevent="goToForgetPassword">找回密码</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      agreement: false // 添加同意条款状态
    };
  },
  methods: {
    login() {
      // 检查是否同意条款
      if (!this.agreement) {
        this.$message({
          message: '请阅读并同意用户协议和隐私政策',
          type: 'warning'
        });
        return;
      }

      let url = '/user/login';
      this.$http.get(url, {
        params: this.form
      }).then(res => {
        if (res.data.code === 1) {
          // 登录成功
          const user = res.data.data;
          this.$emit('login-success', user);  // 向父组件发送用户信息
          // 保存用户信息到父组件或者Vuex
          this.$root.user = user;
          // 显示成功消息
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          // 保存会话ID
          sessionStorage.setItem("sessionId", user.sessionId);
          sessionStorage.setItem("user", JSON.stringify(user));
          // 登录成功后跳转到首页
          this.$router.push('/');
        } else {
          // 登录失败
          this.$alert(res.data.msg);
        }
      }).catch(err => {
        console.error('登录请求失败:', err);
        this.$alert('网络错误，请稍后重试');
      });
    },
    goToRegister() {
      this.$router.push('/register');
    },
    goToForgetPassword() {
      this.$router.push('/FogetPasw');
    },
    showTerms(type) {
      // 显示用户协议或隐私政策
      this.$alert(`这里是${type}的详细内容`, type, {
        confirmButtonText: '我已阅读并同意',
        callback: action => {
          if (action === 'confirm') {
            this.agreement = true;
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 400px;
  margin: 50px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

.agreement {
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.agreement a {
  color: #409EFF;
  text-decoration: none;
}

.agreement a:hover {
  text-decoration: underline;
}

.login-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px 0;
  font-size: 16px;
}

.options {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}

.options a {
  color: #409EFF;
  text-decoration: none;
}

.options a:hover {
  text-decoration: underline;
}
</style>
